import React, { useState } from "react";
import { Page, useNavigate } from "zmp-ui";
import { useI18n } from "../i18n";
import Navbar from "../components/navbar";

const FeedbackPage: React.FunctionComponent = () => {
  const { t } = useI18n();
  const navigate = useNavigate();
  
  // 表单状态
  const [selectedCategory, setSelectedCategory] = useState<number>(-1);
  const [email, setEmail] = useState<string>("");
  const [content, setContent] = useState<string>("");
  const [images, setImages] = useState<string[]>([]);

  // 类别选项
  const categories = [
    { id: 0, label: t("feedback.functionIssue") },
    { id: 1, label: t("feedback.suggestion") },
    { id: 2, label: t("feedback.otherIssue") }
  ];

  // 处理类别选择
  const handleCategorySelect = (categoryId: number) => {
    setSelectedCategory(categoryId);
  };

  // 处理邮箱输入
  const handleEmailChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setEmail(e.target.value);
  };

  // 处理内容输入
  const handleContentChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
    setContent(e.target.value);
  };

  // 处理图片上传
  const handleImageUpload = () => {
    // TODO: 实现图片上传功能
    console.log("上传图片");
  };

  // 处理图片删除
  const handleImageDelete = (index: number) => {
    const newImages = images.filter((_, i) => i !== index);
    setImages(newImages);
  };

  // 处理提交
  const handleSubmit = () => {
    // 验证表单
    if (selectedCategory === -1) {
      alert("请选择反馈类别");
      return;
    }

    if (!email.trim()) {
      alert("请输入联系邮箱");
      return;
    }

    // 简单的邮箱格式验证
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(email)) {
      alert("请输入有效的邮箱地址");
      return;
    }

    if (!content.trim()) {
      alert("请输入反馈内容");
      return;
    }

    // TODO: 提交反馈数据
    console.log("提交反馈:", {
      category: selectedCategory,
      email: email.trim(),
      content: content.trim(),
      images: images
    });

    // 提交成功后返回上一页
    navigate(-1);
  };

  return (
    <>
      <style>
        {`
          .feedback-page::-webkit-scrollbar {
            display: none;
          }
        `}
      </style>
      <Page className="page feedback-page" style={{ 
        padding: 0, 
        background: '#f5f5f7',
        overflow: 'auto',
        scrollbarWidth: 'none',
        msOverflowStyle: 'none'
      }}>
        {/* 顶部导航栏 */}
        <div style={{ position: 'sticky', top: 0, zIndex: 100 }}>
          <Navbar title={t("feedback.title")} />
        </div>

        {/* 内容区域 */}
        <div style={{ padding: '0 20px 100px 20px' }}>
          {/* 类别选择 */}
          <div style={{ marginTop: 10 }}>
            <div style={{
              fontSize: 17,
              fontWeight: 'bold',
              color: '#39404D',
              marginBottom: 10,
              padding: '0 10px'
            }}>
              {t("feedback.category")}
            </div>
            
            <div style={{
              display: 'flex',
              flexDirection: 'column',
              gap: 10
            }}>
              {/* 第一行：功能问题、建议 */}
              <div style={{
                display: 'flex',
                gap: 5
              }}>
                {categories.slice(0, 2).map((category) => (
                  <div
                    key={category.id}
                    onClick={() => handleCategorySelect(category.id)}
                    style={{
                      flex: 1,
                      height: 48,
                      backgroundColor: selectedCategory === category.id ? '#fff' : '#f0f0f0',
                      border: selectedCategory === category.id ? '2px solid #FFD700' : '2px solid transparent',
                      borderRadius: 8,
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'space-between',
                      padding: '0 16px',
                      cursor: 'pointer',
                      transition: 'all 0.2s'
                    }}
                  >
                    <span style={{
                      fontSize: 14,
                      color: selectedCategory === category.id ? '#39404D' : '#39404D',
                      fontFamily: 'sans-serif-medium'
                    }}>
                      {category.label}
                    </span>
                    <div style={{
                      width: 14,
                      height: 14,
                      borderRadius: 7,
                      border: selectedCategory === category.id ? '2px solid #FFD700' : '2px solid #ccc',
                      backgroundColor: selectedCategory === category.id ? '#FFD700' : 'transparent',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center'
                    }}>
                      {selectedCategory === category.id && (
                        <div style={{
                          width: 6,
                          height: 6,
                          borderRadius: 3,
                          backgroundColor: '#39404D'
                        }}></div>
                      )}
                    </div>
                  </div>
                ))}
              </div>

              {/* 第二行：其他问题 */}
              <div style={{
                display: 'flex',
                gap: 5
              }}>
                <div
                  onClick={() => handleCategorySelect(categories[2].id)}
                  style={{
                    width: '50%',
                    height: 48,
                    backgroundColor: selectedCategory === categories[2].id ? '#fff' : '#f0f0f0',
                    border: selectedCategory === categories[2].id ? '2px solid #FFD700' : '2px solid transparent',
                    borderRadius: 8,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'space-between',
                    padding: '0 16px',
                    cursor: 'pointer',
                    transition: 'all 0.2s'
                  }}
                >
                  <span style={{
                    fontSize: 14,
                    color: selectedCategory === categories[2].id ? '#39404D' : '#39404D',
                    fontFamily: 'sans-serif-medium'
                  }}>
                    {categories[2].label}
                  </span>
                  <div style={{
                    width: 14,
                    height: 14,
                    borderRadius: 7,
                    border: selectedCategory === categories[2].id ? '2px solid #FFD700' : '2px solid #ccc',
                    backgroundColor: selectedCategory === categories[2].id ? '#FFD700' : 'transparent',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center'
                  }}>
                    {selectedCategory === categories[2].id && (
                      <div style={{
                        width: 6,
                        height: 6,
                        borderRadius: 3,
                        backgroundColor: '#39404D'
                      }}></div>
                    )}
                  </div>
                </div>
                <div style={{ width: '50%' }}></div>
              </div>
            </div>
          </div>

          {/* 邮箱输入 */}
          <div style={{ marginTop: 20 }}>
            <div style={{
              height: 48,
              backgroundColor: '#f0f0f0',
              borderRadius: 8,
              padding: '0 16px',
              display: 'flex',
              alignItems: 'center'
            }}>
              <input
                type="email"
                value={email}
                onChange={handleEmailChange}
                placeholder={t("feedback.enterEmail")}
                style={{
                  width: '100%',
                  border: 'none',
                  background: 'transparent',
                  fontSize: 14,
                  color: '#39404D',
                  outline: 'none'
                }}
              />
            </div>
          </div>

          {/* 内容输入 */}
          <div style={{ marginTop: 20 }}>
            <div style={{
              backgroundColor: '#f0f0f0',
              borderRadius: 8,
              padding: 16,
              minHeight: 142
            }}>
              <textarea
                value={content}
                onChange={handleContentChange}
                placeholder={t("feedback.inputContent")}
                maxLength={300}
                style={{
                  width: '100%',
                  minHeight: 110,
                  border: 'none',
                  background: 'transparent',
                  fontSize: 14,
                  color: '#39404D',
                  fontFamily: 'sans-serif-medium',
                  outline: 'none',
                  resize: 'none'
                }}
              />
              
              {/* 字符计数和图片上传区域 */}
              <div style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'flex-end',
                marginTop: 16
              }}>
                {/* 图片上传按钮 */}
                <div
                  onClick={handleImageUpload}
                  style={{
                    width: 74,
                    height: 74,
                    backgroundColor: '#87CEEB',
                    borderRadius: 8,
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    cursor: 'pointer'
                  }}
                >
                  <span style={{ fontSize: 24, color: '#fff' }}>🏔️</span>
                </div>

                {/* 计数信息 */}
                <div style={{
                  display: 'flex',
                  flexDirection: 'column',
                  alignItems: 'flex-end',
                  gap: 4
                }}>
                  <div style={{
                    fontSize: 14,
                    color: '#AAAAAC',
                    fontFamily: 'sans-serif-medium'
                  }}>
                    {content.length}/300
                  </div>
                  <div style={{
                    fontSize: 14,
                    color: '#AAAAAC',
                    fontFamily: 'sans-serif-medium'
                  }}>
                    {images.length}/3
                  </div>
                </div>
              </div>

              {/* 已上传的图片 */}
              {images.length > 0 && (
                <div style={{
                  display: 'flex',
                  gap: 8,
                  marginTop: 16,
                  padding: '0 16px'
                }}>
                  {images.map((image, index) => (
                    <div key={index} style={{ position: 'relative' }}>
                      <div style={{
                        width: 60,
                        height: 60,
                        backgroundColor: '#ddd',
                        borderRadius: 8,
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center'
                      }}>
                        <span style={{ fontSize: 20 }}>🖼️</span>
                      </div>
                      <div
                        onClick={() => handleImageDelete(index)}
                        style={{
                          position: 'absolute',
                          top: -8,
                          right: -8,
                          width: 20,
                          height: 20,
                          backgroundColor: '#ff4444',
                          borderRadius: 10,
                          display: 'flex',
                          alignItems: 'center',
                          justifyContent: 'center',
                          cursor: 'pointer',
                          fontSize: 12,
                          color: '#fff'
                        }}
                      >
                        ×
                      </div>
                    </div>
                  ))}
                </div>
              )}
            </div>
          </div>
        </div>

        {/* 底部提交按钮 */}
        <div style={{
          position: 'fixed',
          bottom: 0,
          left: 0,
          right: 0,
          backgroundColor: '#fff',
          borderTop: '1px solid #D2D8E2',
          padding: '14px'
        }}>
          <button
            onClick={handleSubmit}
            style={{
              width: '100%',
              height: 52,
              backgroundColor: '#39404D',
              color: '#fff',
              border: 'none',
              borderRadius: 8,
              fontSize: 17,
              fontWeight: 'bold',
              cursor: 'pointer',
              transition: 'background-color 0.2s'
            }}
            onMouseEnter={(e) => {
              e.currentTarget.style.backgroundColor = '#2a2f3a';
            }}
            onMouseLeave={(e) => {
              e.currentTarget.style.backgroundColor = '#39404D';
            }}
          >
            {t("feedback.submit")}
          </button>
        </div>
      </Page>
    </>
  );
};

export default FeedbackPage;
